<template>
  <a-alert
    :after-close="afterClose"
    :banner="banner"
    :closable="closable"
    :close-icon="closeIcon"
    :close-text="closeText"
    :description="description"
    :icon="icon"
    :message="message"
    :show-icon="showIcon"
    :type="type"
    @close="close"
  >
    <template v-if="$slots.closeIcon" #closeIcon>
      <slot name="closeIcon" />
    </template>
    <template v-if="$slots.closeText" #closeText>
      <slot name="closeText" />
    </template>
    <template v-if="$slots.description" #description>
      <slot name="description" />
    </template>
    <template v-if="$slots.icon" #icon>
      <slot name="icon" />
    </template>
    <template v-if="$slots.message" #message>
      <slot name="message" />
    </template>
    <slot />
  </a-alert>
</template>

<script>
import { defineComponent } from 'vue'
import { Alert } from 'ant-design-vue'
export default defineComponent({
  name: 'ZAlert',
  components: {
    AAlert: Alert
  },
  props: {
    afterClose: {
      type: Function,
      default: undefined
    },
    banner: {
      type: Boolean,
      default: false
    },
    closable: {
      type: Boolean,
      default: undefined
    },
    closeText: {
      type: String,
      default: undefined
    },
    description: {
      type: String,
      default: undefined
    },
    icon: {
      type: Function,
      default: undefined
    },
    message: {
      type: String,
      default: undefined
    },
    showIcon: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'info'
    }
  },
  methods: {
    close(e) {
      this.$emit('close', e)
    }
  }
})
</script>
